<template>
  <div class="front shop">
    <Top />
    <div class="shopInfoBox docWidth">
      <div class="shopInfo">
        <img :src="shopInfo.shopImage?shopInfo.shopImage:require('@/assets/front-img/logo.png')" alt />
        <ul class="count">
          <li>
            <div class="label">成交数</div>
            <div class="value">{{shopInfo.shopDealNum}}</div>
          </li>
          <li>
            <div class="label">买家数</div>
            <div class="value">{{shopInfo.shopBuyerNum}}</div>
          </li>
          <li>
            <div class="label">交货周期</div>
            <div class="value">{{shopInfo.shopDealDay}}</div>
          </li>
          <li>
            <div class="label">退货率</div>
            <div class="value">{{shopInfo.shopRefundRate}}</div>
          </li>
          <!-- <li style="cursor: pointer;" @click="select2(shopInfo.mobile,shopInfo.mobile)">
            <i class="el-icon-headset"></i>
            <div class="label">客服</div>
            <i class="el-icon-service"></i>
          </li> -->

          <li style="cursor: pointer;" @click="toMessage()">
            <div class="label">客服</div>
            <i class="el-icon-service"></i>
          </li>
        </ul>
      </div>
      <el-dialog :title="shopInfo.companyName" :visible.sync="dialogVisible" width="1000px">
        <div style="height: 500px;">
          <!-- <MessageBox
            :type="activeKey"
            :card="$refs['person_card']"
            :select="select"
            ref="messageBox"
          /> -->
          <Message
            :type="activeKey"
            :broken="broken"
            :hideUserList="hideUserList"
            :showUserList="showUserList"
            ref="messageList"
          />
        </div>

        <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="send">确定发送</el-button>
        </span> -->
      </el-dialog>
      <!-- <span class="btn hover" style="font-weight: bold;margin: 0 70px 0 20px;cursor: pointer;font-size: 22px;" @click="$router.push('/cart')">购物车</span> -->
      <Search style="flex: none;margin-left:100px" :showSearchShop="showSearchShop" :showQrCode="false" />
    </div>
    <div class="logo">
      <div class="docWidth">
        <div class="name">{{shopInfo.companyName}}</div>
      </div>
    </div>
    <div class="navBox">
      <div class="docWidth nav">
        <ul>
          <li v-for="(item,index) in  navList" :key="index" :class="currentIndex===index?'active':''"
            @click="navSelect(index)">{{item.name}}</li>
        </ul>
        <div>
          <a @click="collect">{{shopInfo.isCollect ? '取消收藏' : '收藏店铺'}}</a>
          <!-- <a @click="$router.push({ path: '/front-shop/enquiry', query: { id: shopId } })">在线咨询</a> -->
        </div>
      </div>
    </div>
    <router-view />
    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { mapGetters, mapState, mapActions } from 'vuex'
import Footer from "@/views/front/components/Footer";
import Search from '../components/Search'
import Top from '../components/Top'
import { pageVoByQo } from "@/api/front-home.js";
import { getToken } from "@/utils/auth";
import { addFriend } from '@/api/user'
import MessageBox from "@/components/chat/index.vue";
import Message from "@/components/chat/message.vue";

export default {
  name: 'FrontShop',
  components: {
    Footer,
    Search,
    Top,
    MessageBox,
    Message
  },
  data() {
    return {
      detail: {},
      navList: [
        // { name: "首页", to: "/front-shop/home" },
        // { name: "全部商品", to: "/front-shop/allProduct" },
        { name: "首页", to: "/front-shop/home" },
        { name: "店铺介绍", to: "/front-shop/shopInfo" },
        { name: "公司动态", to: "/front-shop/shopNews" },
        { name: "全部产品", to: "/front-shop/allProduct" },
        { name: "店铺相册", to: "/front-shop/shopImgs" },
        // { name: "在线询价", to: "/front-shop/enquiry" },
        // { name: "联系方式", to: "/front-shop/contact" },
      ],
      currentIndex: -1,
      showSearchShop: false,
      shopId: 0,
      categoryList: [],
      dialogVisible:false,

      broken: false,
      collapsed: false,
      activeKey: "contact",
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
    ...mapState({
      // shopId: state => state.front.shopId,
      shopInfo: state => state.front.shopInfo,
    }),
    chatList() {
      console.log('q2');
      return this.$store.state.chat.msgList;
    },
    selectedKeys() {
      return [this.activedKey || ""];
    }
  },
  watch: {
    //会调用几次（废弃）
    // shopId: {
    //   immediate: true,
    //   handler(val) {
    //     if (val) {
    //       this.$store.dispatch('front/getShopInfo', val)
    //     }
    //   },
    // },
    //刷新时
    $route: {
      immediate: true,
      handler(val) {
        this.showSearchShop = val.path === '/front-shop/productDetail' ? true : false
        let findIndex = -1
        this.navList.some((item, index) => {
          if (val.path === item.to) {
            findIndex = index
            return true
          }
        })
        // if (findIndex && val.path === '/front-shop/allProduct' && val.query.categoryId) {
        //   if (!this.categoryList || this.categoryList.length < 1) {
        //     this.pageVoByQo().then(res => {
        //       this.selectCategoryProduct(val)
        //     })
        //   } else {
        //     this.selectCategoryProduct(val)
        //   }
        // } else {
        this.navSelect(findIndex);
        // }
      },
    },
  },
  created() {
    this.shopId = this.$route.query.id && Number(this.$route.query.id)
    // if (!this.categoryList || this.categoryList.length < 1) {
    //   this.pageVoByQo()
    // }
    console.log(this.shopInfo);
  },
  methods: {
    ...mapActions([
      "onLogout",
      "onGetFirendBlack",
      "initChatState",
      "updateConfr",
      "setCallStatus",
      "hangup",
      "cancelCall",
    ]),
    select(i) {
      this.$refs.messageList.select(i);
      //
      if (this.broken) {
        this.$data.collapsed = true;
      }
    },
    hideUserList() {
      this.$data.collapsed = true;
    },
    showUserList() {
      this.$data.collapsed = false;
    },
    onCollapse(collapsed, type) {
      if (type != "responsive") {
        this.$data.collapsed = true;
      } else {
        this.$data.collapsed = false;
      }
    },
    onBreakpoint(broken) {
      this.$data.broken = broken;
    },
    select2(key, index) {
      let data = new Object;
      data.name = key
      this.dialogVisible = true;
       this.$nextTick(function(){
          this.$data.selectedKeys = [index];
          this.select(data);
          this.$data.activedKey = data;
       })

    },


    navSelect(index) {
      if (index === this.currentIndex || index < 0) {
        this.currentIndex = index
        return
      }
      this.shopId = this.$route.query.id && Number(this.$route.query.id)
      this.currentIndex = index
      this.$router.push({ path: this.navList[index].to, query: { id: this.shopId } });
    },
    collect() {
      if (this.userInfo && this.userInfo.id) {
        const params = {
          otherId: this.shopId,
          type: 2
        }
        this.$store.dispatch('front/collect', params).then(() => {
          this.$message.success('操作成功')
          this.$store.dispatch('front/getShopInfo', this.shopId)
        }).catch(() => [
          this.$message.error('操作失败')
        ])
      } else {
        this.$confirm('请登录后执行此操作').then(() => {
          this.$router.replace(`/login?redirect=${this.$route.fullPath}`)
        })
      }
    },
    pageVoByQo() {
      return new Promise((resolve, reject) => {
        pageVoByQo({ companyType: 1 })
          .then((res) => {
            this.categoryList = res
            if (res && res.length > 0 && this.navList.length <= 2) {
              res.forEach(element => {
                this.navList.push(
                  { name: element.name, to: `/front-shop/allProduct?categoryId=${element.id}`, categoryId: element.id }
                )
              });
            }
            resolve(res);
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
    selectCategoryProduct(val) {
      let findIndex = -1
      this.navList.some((element, index) => {
        if (element.categoryId && Number(val.query.categoryId) === element.categoryId) {
          findIndex = index
          return true
        }
      })
      this.navSelect(findIndex);
    },
    toMessage() {
      addFriend({ friendId: this.shopInfo.id }).then(response => {
        let url = 'https://chat.utea88.com/?token=' + getToken() + '&recvId=' + this.shopInfo.id
        window.open(url, '_blank');
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.shop {
  .shopInfoBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 102px;
    .shopInfo {
      display: flex;
      align-items: center;
      img {
        max-width: 350px;
        height: 60px;
        display: block;
      }
      .count {
        margin-left: 40px;
        display: flex;
        li {
          padding: 0 15px;
          text-align: center;
          font-size: 14px;
          line-height: 1.5;
          .label {
            // font-weight: 300;
            color: #555555;
          }
          .value {
            font-weight: 400;
            color: #000;
          }
        }
      }
    }
  }
  .logo {
    padding: 39px 0 23px;
    background: url(../../../assets/front-img/shop/logoBack.png) center center
      no-repeat;
    background-size: cover;
    .name {
      font-size: 26px;
      font-weight: 400;
      color: #fff;
    }
  }
  .navBox {
    background: #000000;
    .nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 7px;
      ul {
        display: flex;
        li {
          padding: 0 32px;
          font-size: 16px;
          font-weight: 400;
          color: #ffffff;
          line-height: 40px;
          font-weight: bold;
          cursor: pointer;
          &.active,
          &:hover {
            color: #965f29;
            // background: #965f29;
            // border-radius: 5px 5px 0 0;
          }
        }
      }
      a {
        font-size: 16px;
        color: #ff9c00;
        margin-left: 50px;
      }
    }
  }
}
</style>
